<template>
    <!-- 新增员工对话框 -->
    <el-dialog
          title="新增员工(统一新密码:111111)"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>

            <el-form ref="form" :model="form" label-width="110px" style="overflow: auto;">
                <el-form-item label="上传头像">
                    <el-upload
                        :action="objData.host"
                        :data="objData"
                        :before-upload="getOSS"
                        :file-list="fileList"
                        :on-success="onSuccess"
                        list-type="picture"
                        width="78%">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件
                            <span style="color: red;">(不上传则为默认头像)</span>
                        </div>
                    </el-upload>
                </el-form-item>
    
                <el-form-item label="用户名">
                    <el-input v-model="form.username" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.sex" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input type="number" v-model.number="form.age" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="form.phone" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="身份证">
                    <el-input v-model="form.id_card" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="亲属">
                    <el-input v-model="form.clan" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="亲属电话">
                    <el-input v-model="form.clan_phone" style="width: 270px;"></el-input>
                </el-form-item>
                <el-form-item label="所属员工">
                    <el-select v-model="form.employee_id" placeholder="请选择所属员工" style="width: 270px;">
                    <el-option :label="item.username" :value="item.id" v-for="item in employeeList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="其他信息">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="form.other"
                        style="width: 270px;"
                        placeholder="选填">
                    </el-input>
                </el-form-item>
            </el-form>
  
          <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addOlder">添 加</el-button>
          </span>
      </el-dialog>
  
  </template>
  
  <script>
      import myAxios from "@/tools/myAxios";
      import Qs from 'qs';
      import axios from "axios";
      import {nanoid} from 'nanoid';
      axios.defaults.withCredentials = true;
      export default {
          name:'OlderManageAdd',
          data() {
              return {
                  // 对话框的展示
                  centerDialogVisible: false,
                  // 所有员工信息
                  employeeList:[],
                  // 收集数据
                  form:{
                      username:'',
                      sex:'',
                      age:null,
                      phone:'',
                      address:'',
                      id_card:'',
                      employee_id:null,
                      other:'',
                      clan:'',
                      clan_phone:'',
                      photo_url:''    // 当前上传的头像的url
                  },
                  // 头像的预览
                  fileList: [],
                  // 图片上传后端签名数据
                  objData:{
                      OSSAccessKeyId:'',
                      policy:'',
                      Signature:'',
                      key:'',
                      dir:'',
                      host:''
                  },
  
                  myUUID:'',       // uuid
                  myData:'',       // images/当前时间/
              }
          },
          watch:{
              centerDialogVisible(newValue,oldValue){
                  // 每次打开对话框时都进行初始化
                  if(newValue){
                      this.form = {
                            username:'',
                            sex:'',
                            age:null,
                            phone:'',
                            address:'',
                            id_card:'',
                            employee_id:null,
                            other:'',
                            clan:'',
                            clan_phone:'',
                            photo_url:''    // 当前上传的头像的url
                        }
                  }
              }
          },
          methods:{
              // 确定添加按钮
              addOlder(){
                  if(this.form.username.trim() === ''  || this.form.sex.trim() === ''     ||
                     this.form.age === null            || this.form.phone.trim() === ''   ||
                     this.form.address.trim() === ''   || this.form.id_card.trim() === '' ||
                     this.form.employee_id === null    || this.form.clan.trim() === ''    ||
                     this.form.clan_phone.trim() === ''){
  
                          // 提示一下
                          this.$message({
                              showClose: true,
                              message: '请填写完整信息(头像选填)!',
                              type: 'error'
                          });
                     }
                  
                  // 添加老人
                  myAxios(
                      'http://localhost:8088/older/addolderinfo',
                      'post',
                      Qs.stringify(this.form),
                      (data)=>{
                          window.location.reload();
                          // 提示一下
                          this.$message({
                              message: '添加老人成功!',
                              type: 'success'
                          });
                      }
                  )
              },
              // 拿到oss的服务端签名
              getOSS(file){
                  let _this = this;
                  return new Promise((resolve,reject)=>{
                      // 请求后端
                      axios.get('http://localhost:8088/oss/policy').then(
                          response => {
                              _this.objData.OSSAccessKeyId = response.data.data.accessId;
                              _this.objData.policy = response.data.data.policy;
                              _this.objData.Signature = response.data.data.signature;
                              _this.objData.dir = response.data.data.dir;
                              _this.objData.host = response.data.data.host;                           // 直传oss地址
                              _this.myUUID = nanoid();      // uuid
                              _this.objData.key = response.data.data.dir+_this.myUUID+"${filename}";      // 文件名,使用nanoid生成唯一值
                              _this.myData = response.data.data.dir;     // images/时间/
                              resolve(true);   // 继续上传
                          },
                          error => {
                              console.log(error.message);
                              reject(false);   // 停止上传
                          }
                      )
                  });
              },
              // 图片上传成功时调用
              onSuccess(response, file, fileList){
                  if(fileList.length > 1){
                      fileList.shift();
                  }
                  this.form.photo_url = 'https://pension-system-wj.oss-cn-beijing.aliyuncs.com/'+this.myData+this.myUUID+file.name;
              },
              // 新增员工对话框的事件回调
              addFunction(data){
                  this.centerDialogVisible = data;
              },
          },
          mounted(){
              // 绑定自定义事件
              this.$bus.$on('addOlderOnOlderManage',this.addFunction);
  
              // 获取所有的员工信息
              myAxios(
                  'http://localhost:8088/employee/getallemployeelist',
                  'get',
                  null,
                  (data)=>{
                      this.employeeList = data;
                  }
              )
          },
          beforeDestroy(){
              // 解绑
              this.$bus.$off('addOlderOnOlderManage');
          }
      }
  </script>
  
  <style>
  </style>